<template>
  <div class="code-editor">
    <textarea
      ref="textareaRef"
      :value="modelValue"
      @input="handleInput"
      class="editor-textarea"
      :placeholder="placeholder"
    ></textarea>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  language: {
    type: String,
    default: 'javascript'
  },
  placeholder: {
    type: String,
    default: '请输入代码'
  }
})

const emit = defineEmits(['update:modelValue'])

const textareaRef = ref(null)

const handleInput = (e) => {
  emit('update:modelValue', e.target.value)
}

watch(() => props.modelValue, (val) => {
  if (textareaRef.value && val !== textareaRef.value.value) {
    textareaRef.value.value = val
  }
})

onMounted(() => {
  if (textareaRef.value) {
    textareaRef.value.value = props.modelValue
  }
})
</script>

<style scoped>
.code-editor {
  width: 100%;
  height: 100%;
  position: relative;
}

.editor-textarea {
  width: 100%;
  height: 100%;
  padding: 12px;
  font-family: 'Fira Code', Consolas, Monaco, 'Andale Mono', monospace;
  font-size: 14px;
  line-height: 1.5;
  color: #eee;
  background: #1e1e1e;
  border: none;
  resize: none;
  outline: none;
  tab-size: 2;
}

.editor-textarea:focus {
  outline: 1px solid #0078d4;
}

/* 暗黑模式适配 */
:deep(html.dark) .editor-textarea {
  background: #000;
  color: #fff;
}
</style> 